class Ueditor extends React.Component {
    constructor(props) {
        super(props);
        this.rulId = $.query.get("ueditorId");
        this.state = {
            inputValues: {
                description: '',
                ueditorId: this.rulId ? this.rulId : this.getUid(),
                customId: ''
            }
        }
    }

    componentDidMount() {
        let regex=/^[0-9a-zA-z-_]+$/;
        //自定义验证规则
        this.verify = {
            description: (value) => {
                if (value.length < 2) {
                    return '描述至少得2个字符!';
                }
            },
            customId: (value) => {
                if (!regex.test(value)) {
                    return 'ID只能是英文、数字、横线组成!';
                }
            }
        };

        this.ue = UE.getEditor('editor', {
            initialFrameHeight: 550,//设置编辑器高度
            scaleEnabled: true//设置不自动调整高度
        });
        this.ue.ready(() => {
            if (this.rulId) {
                let param = {};
                param.ueditorId = this.state.inputValues.ueditorId;
                postJson("/cms/richText/queryEditorInfo.x", $.param(param), (data) => {
                    console.log("data", data);
                    this.state.inputValues.description = data.data.description;
                    this.ue.execCommand('insertHtml', data.data.content);
                    /*UE.getEditor('editor').setContent(data.data.content, false);*/
                    this.setState({});
                });
            }
            this.setUploadUrl();
        });
    }

    inputChange(type, value) {
        this.state.inputValues[type] = value;
        this.setState({});
    }

    addIdModal() {
        this.refs.modal_add_id.show();
    }

    submitCustomId() {
        this.state.inputValues['ueditorId'] = this.state.inputValues['customId'];
        this.state.inputValues['customId'] = '';
        this.setState({});
    }

    ueditorSubmit() {
        if (!this.ue.hasContents()) {
            layer.msg('没有内容！', {icon: 5});
            return;
        }
        let content = this.ue.getContent();
        let param = {};
        param.id = this.state.inputValues.ueditorId;
        param.content = content;
        param.description = this.state.inputValues.description;
        postJson('/cms/richText/saveEditor.x', param, () => {
            this.refs.description.value = "";
            this.ue.setContent("", false);
            this.state.inputValues.ueditorId = this.getUid();
            this.setState({});
            this.setUploadUrl();
            layer.msg('添加成功', {icon: 6});
        });
    }

    setUploadUrl() {
        let ueditorId = this.state.inputValues.ueditorId;
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function (action) {
            if (action === 'uploadimage' || action === 'uploadscrawl' || action === 'uploadvideo') {
                return '/cms/imagesOss/uploadimage.x?editorId=' + ueditorId;
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        };
    }

    getUid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    render() {
        return <Frame header="车辆信息管理" headerBtns={
            <HeaderBtn onClick={() => this.addIdModal()}><i className="fa fa-plus"/>&nbsp;自定义ID</HeaderBtn>
        }>
            <Form type="pane"
                  id="form"
                  style={{minHeight: '500px'}}
                  verify={() => {
                      return this.verify;
                  }}>
                <Item>
                    <label className="layui-form-label">内容描述</label>
                    <Input block={true}
                           name="description"
                           ref="description"
                           lay-verify="description"
                           placeholder="请输入内容描述"
                           autoComplete="off"
                           type="text"
                           value={this.state.inputValues.description}
                           onChange={(value) => this.inputChange('description', value)}/>
                </Item>
                <Item>
                    <script id="editor" type="text/plain" style={{width: '100%'}}/>
                </Item>

                <Item>
                    <Button formBtn={true}
                            size='sm'
                            btnType='normal'
                            lay-submit="true"
                            onClick={() => this.ueditorSubmit()}>确定提交</Button>
                </Item>
            </Form>

            <Modal title="状态重置" ref="modal_add_id" area={['450px']}>
                <Form type="pane"
                      size="sm"
                      verify={() => {
                          return this.verify;
                      }}>
                    <Item>
                        <Label>当前ID</Label>
                        <div className="layui-input-inline">
                            <div style={{
                                width: '300px',
                                height: '30px',
                                lineHeight: '30px',
                                display: 'block',
                                paddingLeft: '10px'
                            }}>{this.state.inputValues.ueditorId}</div>
                        </div>
                    </Item>
                    <Item>
                        <Label>自定义ID</Label>
                        <Input type="text"
                               value={this.state.inputValues.customId}
                               lay-verify="customId"
                               style={{width: '300px'}}
                               onChange={(value) => this.inputChange('customId', value)}
                               placeholder="请输入ID"
                        />
                    </Item>
                    <Item>
                        <Button formBtn={true}
                                size='sm'
                                btnType='normal'
                                lay-submit="true"
                                onClick={() => this.submitCustomId()}>确定</Button>
                    </Item>
                </Form>
            </Modal>
        </Frame>
    }
}

ReactDOM.render(
    <Ueditor/>,
    document.getElementById('root')
);